<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { getEmpGenderDataApi, getEmpJobDataApi, GenderCountDTO, JobDataCountDTO } from '@/api/emp'

const genderChartRef = ref()
const jobChartRef = ref()

const genderData = ref<GenderCountDTO[]>([])
const jobData = ref<JobDataCountDTO>({ jobList: [], dataList: [] })

const renderGenderChart = () => {
  const chart = echarts.init(genderChartRef.value)
  const option = {
    title: { text: '员工性别分布', left: 'center' },
    tooltip: { trigger: 'item' },
    legend: { orient: 'vertical', left: 'left', data: ['男', '女'] },
    series: [
      {
        name: '性别',
        type: 'pie',
        radius: '60%',
        data: genderData.value.map((item) => ({
          value: item.count,
          name: item.gender === 1 ? '男' : '女',
        })),
        emphasis: {
          itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' },
        },
      },
    ],
  }
  chart.setOption(option)
}

const renderJobChart = () => {
  const chart = echarts.init(jobChartRef.value)
  const jobMap = {
    1: '班主任',
    2: '讲师',
    3: '就业指导',
    4: '生活管理',
    5: '其他',
  }
  const option = {
    title: { text: '员工职位分布', left: 'center' },
    tooltip: { trigger: 'axis' },
    xAxis: { type: 'category', data: jobData.value.jobList.map((j) => jobMap[j] || j) },
    yAxis: { type: 'value' },
    series: [
      {
        data: jobData.value.dataList,
        type: 'bar',
        barWidth: '40%',
        itemStyle: { color: '#3b82f6' },
      },
    ],
  }
  chart.setOption(option)
}

const fetchData = async () => {
  const genderRes = await getEmpGenderDataApi()
  genderData.value = genderRes.data || []
  renderGenderChart()
  const jobRes = await getEmpJobDataApi()
  jobData.value = jobRes.data || { jobList: [], dataList: [] }
  renderJobChart()
}

onMounted(() => {
  fetchData()
})
</script>

<template>
  <div class="emp-count-container">
    <h1>员工数据统计</h1>
    <div class="charts-row">
      <div class="chart-card">
        <div ref="genderChartRef" class="chart-box"></div>
      </div>
      <div class="chart-card">
        <div ref="jobChartRef" class="chart-box"></div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.emp-count-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 0;
}
.charts-row {
  display: flex;
  gap: 32px;
  justify-content: center;
  align-items: flex-start;
}
.chart-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 16px 0 rgba(60, 72, 100, 0.06);
  border: 1px solid #f0f1f3;
  padding: 24px;
  width: 480px;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.chart-box {
  width: 400px;
  height: 320px;
}
@media (max-width: 1100px) {
  .charts-row {
    flex-direction: column;
    gap: 24px;
    align-items: center;
  }
  .chart-card {
    width: 98vw;
    min-width: 0;
    padding: 12px;
  }
  .chart-box {
    width: 90vw;
    min-width: 0;
  }
}
</style>
